<template>
  <div class="hospitalAuditMgt pd-20">
    <el-table ref="multipleTable"
              :data="hospitalList"
              style="width: 100%"
              border>
      <el-table-column type="index"
                       label="序号"
                       width="50">
      </el-table-column>
      <el-table-column label="头像"
                       min-width="50">
        <template slot-scope="scope">
          <el-avatar :size="50">
            <img :src="scope.row.imageUrl" />
          </el-avatar>
        </template>
      </el-table-column>
      <el-table-column prop="name"
                       label="医院名称"
                       min-width="150">
      </el-table-column>
      <el-table-column prop="sortNum"
                       label="排序号"
                       min-width="50">
      </el-table-column>
      <el-table-column prop="hospitalCenterName"
                       label="中心"
                       min-width="150">
      </el-table-column>
      <el-table-column prop="address"
                       label="地址"
                       min-width="150">
      </el-table-column>
      <el-table-column prop="phone"
                       label="电话"
                       min-width="100">
      </el-table-column>
      <el-table-column prop="status"
                       label="状态"
                       min-width="100">
        <template slot-scope="scope">
          <span v-if="scope.row.status === -1">已驳回</span>
          <span v-if="scope.row.status === 0">待审核</span>
          <span v-if="scope.row.status === 1">已通过</span>
        </template>
      </el-table-column>
      <el-table-column min-width="120"
                       align="center">
        <template slot="header">
          <el-input v-model="hospitalName"
                    size="mini"
                    @keyup.enter.native="searchHospitalMethod"
                    placeholder="请输入医院名称搜索"
                    clearable />
        </template>
        <template slot-scope="scope">
          <el-button v-if="scope.row.status === 0"
                     size="mini"
                     @click="handlePass(scope.$index, scope.row)">通过</el-button>
          <el-button v-if="scope.row.status === 0"
                     size="mini"
                     @click="handleDismissed(scope.$index, scope.row)">驳回</el-button>
          <span v-else>- -</span>
        </template>
      </el-table-column>
      <infinite-loading slot="append"
                        @infinite="handleHospitalMethod"
                        :identifier="infiniteId"
                        force-use-infinite-wrapper=".el-table__body-wrapper">
      </infinite-loading>
    </el-table>
    <el-dialog class="dialog"
               title="医院信息"
               width="31"
               :close-on-click-modal="false"
               :visible.sync="dialogFormVisible">
      <el-form :model="form">
        <el-form-item :label-width="formLabelWidth"
                      label="头像">
          <el-upload class="avatar-uploader"
                     :action="imageUploadUrl"
                     :show-file-list="false"
                     :on-success="handleAvatarSuccess"
                     :before-upload="beforeAvatarUpload">
            <img v-if="form.imageUrl"
                 :src="form.imageUrl"
                 class="avatar">
            <i v-else
               class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </el-form-item>
        <el-form-item :label-width="formLabelWidth"
                      label="医院名称">
          <el-input v-model="form.name"
                    disabled></el-input>
        </el-form-item>
        <el-form-item :label-width="formLabelWidth"
                      label="医院等级">
          <el-select v-model="form.level"
                     disabled>
            <el-option v-for="it in level"
                       :key="it.level"
                       :label="it.name"
                       :value="it.level"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item :label-width="formLabelWidth"
                      label="平台中心">
          <el-input v-model="form.hospitalCenterName"></el-input>
        </el-form-item>
        <el-form-item :label-width="formLabelWidth"
                      label="排序号">
          <el-input v-model="form.sortNum"
                    disabled></el-input>
        </el-form-item>
        <el-form-item :label-width="formLabelWidth"
                      label="医院详细地址">
          <el-input type="text"
                    v-model="form.address"
                    placeholder="请输入医院详细地址"></el-input>
        </el-form-item>
        <el-form-item :label-width="formLabelWidth"
                      label="电话">
          <el-input type="text"
                    v-model="form.phone"
                    placeholder="请输入电话号码"></el-input>
        </el-form-item>
        <el-form-item :label-width="formLabelWidth"
                      label="介绍">
          <el-input type="textarea"
                    v-model="form.introduce"
                    :rows="4"
                    maxlength="100"
                    show-word-limit
                    placeholder="请输入医院介绍"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer"
           class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary"
                   @click="handleAudit()">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  export default {
    name: "hospitalAuditMgt",
    data () {
      return {
        loading: false,
        dialogFormVisible: false,
        hospitalList: [],
        pageSize: 20,
        pageIndex: 0,
        hospitalName: '',
        form: {
          id: '',
          name: null,
          imageUrl: null,
          address: null,
          hospitalCenterName: null,
          introduce: null,
          level: null,
          phone: null,
          sortNum: null,
          status: ''
        },
        imageUploadUrl: this.api.hospitalManager.uploadImg,
        formLabelWidth: '120px',
        infiniteId: 0,
        state: '',
        level: [
          { level: 1, name: "三甲医院" },
          { level: 2, name: "三乙医院" },
          { level: 3, name: "三级丙等" },
          { level: 4, name: "三级丁等" },
          { level: 5, name: "二级甲等" },
          { level: 6, name: "二级乙等" },
          { level: 7, name: "二级丙等" },
          { level: 8, name: "二级丁等" },
          { level: 9, name: "一级甲等" },
          { level: 10, name: "一级乙等" },
          { level: 11, name: "一级丙等" },
          { level: 20, name: "诊所" },
          { level: 99, name: "药店" },
          { level: 999, name: "其他" },
        ]
      }
    },
    methods: {
      handleHospitalMethod ($state) {
        this.state = $state;
        let param = {
          name: this.hospitalName,
          pageSize: this.pageSize,
          pageIndex: this.pageIndex
        };
        this.post(this.api.hospitalManager.hospitalAuditList, param).then((res) => {
          if (res.data.code === '200') {
            if (res.data.object.length) {
              this.pageIndex += 1;
              this.hospitalList = this.hospitalList.concat(res.data.object);
              $state.loaded();
            } else {
              $state.complete();
            }
          } else {
            this.$message({
              showClose: true,
              message: res.data.message,
              type: 'error'
            })
          }
        });
      },
      searchHospitalMethod () {
        if (this.hospitalName === '') {
          this.pageIndex = 0;
          this.hospitalList = [];
          this.infiniteId += 1;
        } else {
          this.pageIndex = 0;
          this.hospitalList = [];
          this.handleHospitalMethod(this.state)
        }
      },
      handlePass (index, rowData) {
        this.form.id = rowData.id;
        this.form.status = 1;
        this.form.name = rowData.name;
        this.form.level = rowData.level;
        this.form.sortNum = rowData.sortNum;
        this.dialogFormVisible = true
      },
      handleDismissed (index, rowData) {
        this.form.id = rowData.id;
        this.form.status = -1;
        this.handleAudit()
      },
      handleAudit () {
        this.post(this.api.hospitalManager.saveHospital, this.form).then(res => {
          if (res.data.code === '200') {
            this.$message({
              showClose: true,
              message: "操作成功!",
              type: 'success'
            });
            this.dialogFormVisible = false;
            this.handleHospitalMethod(this.state)
          } else {
            this.$message({
              showClose: true,
              message: res.data.message,
              type: 'error'
            })
          }
        })
      },
      handleAvatarSuccess (res) {
        this.form.imageUrl = res.data;
      },
      beforeAvatarUpload (file) {
        const isLt2M = file.size / 1024 / 1024 < 2;

        if (!isLt2M) {
          this.$message.error('上传头像图片大小不能超过 2MB!');
        }
        return isLt2M;
      }
    }
  }
</script>

<style>
  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409eff;
  }
  .avatar-uploader .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
  .dialog .el-input {
    width: 400px;
  }
  .dialog .el-textarea {
    width: 400px;
  }
</style>
